<template>
  <el-dialog @close="closeDialog('fileForm')" title="文件上传" :visible.sync="uploadVisible.visible" width="720px">
    <el-form class="ruleForm" :model="reportType == '学校总体诊改报告' ? schoolAllReport : fileForm" :rules="reportType == '学校总体诊改报告' ? schoolAllReportRules : fileFormReuls" ref="fileForm" label-width="120px" label-position="left">
    <!-- v-if="reportType == '学校总体诊改报告' "  -->
      <!-- <div class="w-100">
        <el-form-item class="response" label="选择文件" prop="file">
          <el-upload :http-request="Upload" ref="upload" drag :with-credentials="true" :action="`${baseURL}/v1/pc/api/file/fileUpload`" :on-success="handleSuccess" :on-remove="fileRemove" :on-exceed="onExceed" :multiple="false" :limit="1">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
        <el-form-item label="报告名称" prop="reportName">
          <el-input v-model="schoolAllReport.reportName" placeholder="请输入报告名称"></el-input>
        </el-form-item>
        <el-form-item label="所属诊改阶段" prop="year">
          <el-select v-model="schoolAllReport.year" placeholder="请选择所属诊改阶段">
            <el-option v-for="year in yearArr" :key="year" :label="year" :value="year"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="编制部门" prop="reportIndex">
          <el-select v-model="schoolAllReport.reportIndex" placeholder="请选择编制部门">
            <el-option v-for="report in $store.state.reportIndex" :key="report.value" :label="report.name" :value="report.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="负责人" prop="head">
          <el-input v-model="schoolAllReport.head" placeholder="请输入负责人"></el-input>
        </el-form-item>
        <el-form-item label="编制人">
          <el-input v-model="schoolAllReport.editer" placeholder="请输入编制人"></el-input>
        </el-form-item>
      </div> -->
      <div class="w-100">
        <el-form-item class="response" label="选择文件" prop="file">
          <el-upload :http-request="Upload" ref="upload" drag :with-credentials="true" :action="`${baseURL}/v1/pc/api/file/fileUpload`" :on-success="handleSuccess" :on-remove="fileRemove" :on-exceed="onExceed" :multiple="false" :limit="1">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-form-item>
         <!-- class="small" -->
        <el-form-item label="诊改报告名称" prop="reportName">
          <el-input v-model="fileForm.reportName" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="报告所属层面" prop="reportIndex">
          <el-select v-model="fileForm.reportIndex" placeholder="报告所属层面">
            <el-option v-for="report in $store.state.reportIndex" :key="report.value" :label="report.name" :value="report.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属诊改阶段" prop="year">
          <el-select v-model="fileForm.year" placeholder="请选择所属诊改阶段">
            <el-option v-for="year in yearArr" :key="year" :label="year" :value="year"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="编制部门" prop="preparationDepartment">
          <el-input v-model="fileForm.preparationDepartment" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item class="response" label="备注">
          <el-input v-model="fileForm.note" placeholder="请输入内容"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="uploadVisible.visible = false">取 消</el-button>
      <el-button type="primary" @click="submitForm('fileForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { uploadFile, saveReportMaintain } from '@/api/report.js'
export default {
  props: {
    // 是否显示上传文件弹框
    uploadVisible: {
      type: Object
    }
  },
  data () {
    // 上传文件验证规则
    var validFile = (rule, value, callback) => {
      if (this.fileForm.filePath === '') {
        return callback(new Error('请选择文件'))
      } else {
        callback()
      }
    }

    return {
      reportType: '',
      fileType: '',
      // 保存文件上传信息对象
      fileForm: {
        // 报告所属层面
        reportIndex: '',
        // 报告所属角度
        rectificationRangeId: '',
        // 报告所属年度
        year: '',
        // 报告名称 ,
        reportName: '',
        // 编制部门
        preparationDepartment: '',
        // 报告文件描述
        reportFileDesc: '',
        // 文件路径
        filePath: '',
        fileType: '',
        note: ''
      },
      // 文件上传校验规则
      fileFormReuls: {
        file: [{ required: true, validator: validFile, trigger: 'blur' }],
        reportName: [{ required: true, message: '请输入诊改报告名称', trigger: 'blur' }],
        reportIndex: [{ required: true, message: '请选择报告所属层面', trigger: 'change' }],
        year: [{ required: true, message: '请选择所属诊改阶段', trigger: 'change' }],
        preparationDepartment: [{ required: true, message: '请输入编制部门', trigger: 'change' }]
      },
      yearArr: this.$config.yearArr(),
      baseURL: this.baseURL,
      // 学校总体诊改报告
      schoolAllReport: {
        file: '',
        // 报告名称
        reportName: '',
        // 所属诊改阶段
        year: '',
        // 编制部门
        reportIndex: '',
        // 负责人
        head: '',
        // 编制人
        editer: '',
        // 文件路径
        filePath: '',
        // 文件类型
        fileType: ''

      },
      schoolAllReportRules: {
        file: [{ required: true, validator: validFile, trigger: 'blur' }],
        reportName: [{ required: true, message: '请输入报告名称', trigger: 'blur' }],
        year: [{ required: true, message: '请选择所属诊改阶段', trigger: 'change' }],
        reportIndex: [{ required: true, message: '请选择报告所属层面', trigger: 'change' }],
        head: [{ required: true, message: '请输入负责人', trigger: 'blur' }]
      }
    }
  },
  created () {
  },
  mounted () {
    // console.log(this.fileType, 'this.fileType');
  },
  methods: {
    // handleBeforeUpload(file) {
    //   const data = {}
    //   data.busType = 'chain'
    //   if (file.type.includes('image')) {
    //     data.fileType = 'image'
    //   } else {
    //     data.fileType = 'file'
    //   }
    //   this.uploadPrams = data
    //   return Promise.resolve(file)
    // },
    handleSuccess (res, file) {
      console.log(res, 'magene');
      if (res.code === 'SUCCESS') {
        this.fileForm.filePath = res.data
      }
    },
    fileRemove () {
      this.fileList = {}
    },
    onExceed () {
      this.$message.error('请先移除下方已经上传的文件再重新上传！')
    },
    Upload (params) {
      const file = params.file
      // 诊断报告
      const busType = 'report'
      // 文件类型
      var fileType = ''

      if (file.type.includes('image')) {
        fileType = 'image'
      } else {
        fileType = 'file'
      }
      this.fileType = fileType

      const form = new FormData()
      form.append('file', file)
      form.append('busType', busType)
      form.append('fileType', fileType)
      uploadFile(form).then((res, res2) => {
        // if (this.reportType === '学校总体诊改报告') {
        // this.schoolAllReport.filePath = res
        // }
        this.fileForm.filePath = res
      })
    },
    closeDialog (formName) {
      this.$refs[formName].resetFields()
    },
    handleFile () {
      // if (this.reportType === '学校总体诊改报告') {
      //   return this.schoolAllReport
      // }
      return this.fileForm
    },
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          saveReportMaintain(this.handleFile()).then(res => {
            this.$refs[formName].resetFields()
          // if (this.reportType !== 'schoolAllReport') {
            this.fileForm.fileType = ''
            this.fileForm.filePath = ''
          // }
            this.uploadVisible.visible = false
            this.$emit('addReport')
          })
        } else {
          this.$message.error('请填写必填项！')
        }
      })
      // saveReportMaintain(this.fileForm).then(res => {
      //   this.$refs[formName].resetFields()
      //   this.fileForm.fileType = ''
      //   this.fileForm.filePath = ''
      //   this.uploadVisible.visible = false
      //   this.$emit('addReport')
      // })
      // console.log(this.fileForm)
      // console.log(this.$refs[formName])
      // this.$refs[formName].validate(valid => {
      //   if (valid) {
      //     alert('submit!')
      //   } else {
      //     console.log('error submit!!')
      //     return false
      //   }
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.ruleForm {
  display: flex;
  flex-wrap: wrap;
}
.ruleForm .response {
  width: 100%;
}
.ruleForm .small {
  width: 50%;
}
</style>
